<template>
    <div id="app">
      <nav class="top-navbar" :class="{ fixed: isSticky }">
        <div class="back">
          <button>&lt;</button>
        </div>
        <div class="nav-right">
          <a href="#" class="nav-link">首页</a>
          <a href="#" class="nav-link">个人中心</a>
          <a href="#" class="nav-link">购物车</a>
          <a href="#" class="nav-link">收藏夹</a>
          <a href="#" class="nav-link">帮助中心</a>
          <button class="sign-in-button">Sign in</button>
          <button class="register-button">Register</button>
        </div>
      </nav>
      <div class="shopping-cart">
        <div class="left-panel">
          <h2>总计</h2>
          <ul class="left-list">
            <li v-for="(item, index) in products" :key="index">
              {{ item.name }}
            </li>
          </ul>
          <button class="total-button" @click="calculateTotal">计算</button>
          <span class="total-price">¥{{ totalPrice }}</span>
        </div>
        <div class="right-panel">
          <div class="filter-search">
            <button class="all-button" @click="selectAllProducts">all</button>
            <input
              type="text"
              placeholder="search"
              class="search-input"
              v-model="searchKeyword"
            />
            <button class="search-icon"><i class="fas fa-search">🔍</i></button>
          </div>
          <div class="product-list">
            <!-- 商品 -->
            <div
              class="product-item"
              v-for="(product, index) in currentPageProducts"
              :key="index"
            >
              <input type="checkbox" v-model="product.isChecked" />
              <img :src="product.image" alt="product" class="product-image" />
              <div class="product-info">
                <span class="product-name">{{ product.name }}</span>
                <span class="product-price">¥{{ product.price }}</span>
                <button class="delete-button" @click="deleteProduct(index)">
                  delete
                </button>
              </div>
            </div>
          </div>
          <!-- 商品 -->
          <div class="pagep">
            <div class="pagination">
              <button class="prev-button" @click="prevPage">上一页</button>
              <span>{{ currentPage }}</span>
              <button class="next-button" @click="nextPage">下一页</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted, onBeforeUnmount, computed } from "vue";
  
  // 定义响应式数据
  const listItems = Array(5);
  const products = ref([
    { name: "name1", price: 10, image: "", isChecked: false },
    { name: "name2", price: 20, image: "", isChecked: false },
    { name: "name3", price: 15, image: "", isChecked: false },
    { name: "name4", price: 8, image: "", isChecked: false },
    { name: "name5", price: 25, image: "", isChecked: false },
    { name: "name6", price: 12, image: "", isChecked: false },
    { name: "name7", price: 12, image: "", isChecked: false },
  ]);
  const currentPage = ref(1);
  const itemsPerPage = 6;
  const totalPages = ref(1);
  const pageNumbers = ref([]);
  const totalPrice = ref(0);
  const isSticky = ref(false);
  const searchKeyword = ref("");
  
  // 计算属性：过滤商品
  const filteredProducts = computed(() => {
    if (!searchKeyword.value) {
      return products.value;
    }
    return products.value.filter((product) =>
      product.name.toLowerCase().includes(searchKeyword.value.toLowerCase())
    );
  });
  
  // 计算属性：获取当前页的商品
  const currentPageProducts = computed(() => {
    const startIndex = (currentPage.value - 1) * itemsPerPage;
    const endIndex = startIndex + itemsPerPage;
    return filteredProducts.value.slice(startIndex, endIndex);
  });
  
  // 滚动事件处理函数
  const handleScroll = () => {
    if (window.pageYOffset > 0) {
      isSticky.value = true;
    } else {
      isSticky.value = false;
    }
  };
  
  // 计算总价函数
  const calculateTotal = () => {
    totalPrice.value = currentPageProducts.value
      .filter((product) => product.isChecked)
      .reduce((sum, product) => sum + product.price, 0);
  };
  
  // 删除商品函数
  const deleteProduct = (index) => {
    const currentProducts = currentPageProducts.value;
    const productIndex = filteredProducts.value.findIndex(
      (p) => p === currentProducts[index]
    );
    filteredProducts.value.splice(productIndex, 1);
    updatePageNumbers();
  };
  // 上一页函数
  const prevPage = () => {
    if (currentPage.value > 1) {
      currentPage.value--;
    }
    updatePageNumbers();
  };
  
  // 下一页函数
  const nextPage = () => {
    if (currentPage.value < totalPages.value) {
      currentPage.value++;
    }
    updatePageNumbers();
  };
  
  // 跳转到指定页函数
  const goToPage = (page) => {
    currentPage.value = page;
    updatePageNumbers();
  };
  
  // 更新页码函数
  const updatePageNumbers = () => {
    totalPages.value = Math.ceil(filteredProducts.value.length / itemsPerPage);
    pageNumbers.value = Array.from({ length: totalPages.value }, (_, i) => i + 1);
  };
  
  // 全选商品函数
  const selectAllProducts = () => {
    const allChecked = currentPageProducts.value.every(
      (product) => product.isChecked
    );
    currentPageProducts.value.forEach((product) => {
      product.isChecked = !allChecked;
    });
    calculateTotal(); // 全选/取消全选后重新计算总价
  };
  
  // 挂载时绑定滚动事件并更新页码
  onMounted(() => {
    window.addEventListener("scroll", handleScroll);
    updatePageNumbers();
  });
  
  // 卸载前移除滚动事件
  onBeforeUnmount(() => {
    window.removeEventListener("scroll", handleScroll);
  });
  </script>
  
  <style scoped>
  * {
    margin: 0 auto;
    padding: 0;
  }
  #app {
    width: 100vw;
    height: auto;
    margin: 0;
    padding-top: 0;
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
  }
  .top-navbar {
    display: flex;
    justify-content: space-between;
    gap: 20vh;
    background-color: #f4f4f4;
    padding: 10px;
    position: relative;
    z-index: 100px;
    transition: all 0.3s ease;
  }
  .back {
    display: flex;
    justify-content: start;
  }
  .nav-right {
    display: flex;
    align-content: flex-end;
  }
  .nav-link:hover {
    color: white;
    background-color: #333;
    border-radius: 20%;
  }
  .fixed {
    position: sticky;
    top: 0;
    width: 100%;
    background-color: #f4f4f4;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  .nav-link {
    margin-right: 20px;
    text-decoration: none;
    color: #333;
  }
  .sign-in-button,
  .register-button {
    background-color: #333;
    color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
  }
  .shopping-cart {
    margin-top: 50px;
    display: flex;
    width: 100%;
    height: 100vh;
  }
  .left-panel {
    width: 300px;
    padding: 20px;
    background-color: #f4f4f4;
  }
  .right-panel {
    flex: 1;
    padding: 20px;
    background-color: #fff;
  }
  .pagep {
    position: relative;
    bottom: -100px;
  }
  .filter-search {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
  .all-button {
    margin-right: 10px;
    padding: 5px 10px;
    background-color: #333;
    color: white;
    border: none;
    cursor: pointer;
  }
  .search-input {
    flex: 1;
    padding: 5px;
  }
  .search-icon {
    padding: 5px 10px;
    background-color: #fff;
    border: 1px solid #ccc;
    cursor: pointer;
  }
  .product-list {
    display: flex;
    flex-direction: column;
  }
  .product-item {
    width: calc(100% - 20px);
    margin-bottom: 20px;
    border: 1px solid #ccc;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
  }
  .product-image {
    width: 100%;
    height: auto;
  }
  .product-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
    margin-left: 10px;
  }
  .delete-button {
    background-color: #333;
    color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
  }
  .pagination {
    position: absolute;
    bottom: 40px;
    right: 40%;
    display: flex;
    justify-content: center;
    gap: 1vh;
    margin-top: 20px;
  }
  .prev-button,
  .next-button {
    padding: 5px 10px;
    background-color: #ccc;
    border: none;
    cursor: pointer;
  }
  .active-page {
    background-color: #333;
    color: white;
    padding: 5px 10px;
    margin: 0 5px;
    cursor: pointer;
  }
  .total-button {
    width: 100%;
    padding: 10px;
    background-color: #333;
    color: white;
    border: none;
    cursor: pointer;
    margin-top: 20px;
  }
  
  .left-list {
    list-style: none;
  }
  </style>
  